<<<<<<< HEAD
<html>
<head>
<title>html 文档结构 </title>
<link rel="stylesheet" href="index.css"/>
</head>
<body style="color:rgb(204, 55, 50);">
<div class="main">
<div class="row">
<input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
<input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
<input type="button" name="bt" id="button2" value="确认2"/>
</div>
<div id="todogroup">
<!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
<!--<div>wdcr</div>-->
<!--这里面 todo项-->
</div>
<div id="xx" onmousedown="enter('xx')" onmousemove="leave('xx')">ZJGSU&nbsp;&nbsp;2023&nbsp;&nbsp;HAPPY NEW YEARS</div>
</body>
<script lang="javascript">

var intCnt = 0;
function init(){
document.getElementById("button2").onclick=handleClick;
}

function keyup(e){
    if(e.key == "Enter")
    handleClick(e);
}

function handleClick(e){
console.log('handleClick');
console.log(e);
var temp = getValue();
//var div= document.createElement('div');
//div.innerText = temp;
//document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
//document.getElementById("todogroup").append(div);
//追加44行一样的div
//把input输入框内的数据清空
document.getElementById("todogroup").innerHTML +="<div class='item' div id='todo"+intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"+temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("+intCnt+")'>删除</button></div>";
document.getElementById("inputtext").value = "";
intCnt++;
// document.getElementsByClassName("main")[0].style="background-color; #333333;";
}

function getValue(){
var temp = document.getElementById("inputtext");
console.log(temp.value);
return temp.value;
}

function deletByIndex(index){
document.getElementById("todo"+index).remove();
}

function enter(id){
    document.getElementById(id).style='background-color:#3e3a3a'

}

function leave(id){
    document.getElementById(id).style='background-color:aliceblue'
}

init();
</script>
<style>
body{
display:flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}

.main{
/*background-color: rgb(229, 255, 0);
height: 200px;*/
padding: 8px;
border: 1px solid #333333;
border-radius: 8px;
}

.row{
display:flex; 
}

.item{
    display: flex;
    align-items: center;
    margin: 6px;
    padding :3px;
    background-color:#ffffff;
}

.item:hover{
    background-color:#a1a1a1;
}

.item-value{
    flex-grow: 1;
    color: red;
}

.item-del{
    color:aliceblue;
    background-color:red;
    border: 0px;
    opacity: 0;
}

.item:hover .item-del{
    opacity: 1;
}

.input{
    padding: 8px;
    outline: none;
}

.input:focus{
    box-shadow: 0px 0px 10px #37ced9;
    border: 2px solid #37d944;
}
</style>
</html>



=======
<<<<<<< HEAD
<html>
<head>
<title>html 文档结构 </title>
<link rel="stylesheet" href="index.css"/>
</head>
<body style="color:rgb(204, 55, 50);">
<div class="main">
<div class="row">
<input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
<input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
<input type="button" name="bt" id="button2" value="确认2"/>
</div>
<div id="todogroup">
<!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
<!--<div>wdcr</div>-->
<!--这里面 todo项-->
</div>
<div id="xx" onmousedown="enter('xx')" onmousemove="leave('xx')">ZJGSU&nbsp;&nbsp;2023&nbsp;&nbsp;HAPPY NEW YEARS</div>
</body>
<script lang="javascript">

var intCnt = 0;
function init(){
document.getElementById("button2").onclick=handleClick;
}

function keyup(e){
    if(e.key == "Enter")
    handleClick(e);
}

function handleClick(e){
console.log('handleClick');
console.log(e);
var temp = getValue();
//var div= document.createElement('div');
//div.innerText = temp;
//document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
//document.getElementById("todogroup").append(div);
//追加44行一样的div
//把input输入框内的数据清空
document.getElementById("todogroup").innerHTML +="<div class='item' div id='todo"+intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"+temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("+intCnt+")'>删除</button></div>";
document.getElementById("inputtext").value = "";
intCnt++;
// document.getElementsByClassName("main")[0].style="background-color; #333333;";
}

function getValue(){
var temp = document.getElementById("inputtext");
console.log(temp.value);
return temp.value;
}

function deletByIndex(index){
document.getElementById("todo"+index).remove();
}

function enter(id){
    document.getElementById(id).style='background-color:#3e3a3a'

}

function leave(id){
    document.getElementById(id).style='background-color:aliceblue'
}

init();
</script>
<style>
body{
display:flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}

.main{
/*background-color: rgb(229, 255, 0);
height: 200px;*/
padding: 8px;
border: 1px solid #333333;
border-radius: 8px;
}

.row{
display:flex; 
}

.item{
    display: flex;
    align-items: center;
    margin: 6px;
    padding :3px;
    background-color:#ffffff;
}

.item:hover{
    background-color:#a1a1a1;
}

.item-value{
    flex-grow: 1;
    color: red;
}

.item-del{
    color:aliceblue;
    background-color:red;
    border: 0px;
    opacity: 0;
}

.item:hover .item-del{
    opacity: 1;
}

.input{
    padding: 8px;
    outline: none;
}

.input:focus{
    box-shadow: 0px 0px 10px #37ced9;
    border: 2px solid #37d944;
}
</style>
</html>



=======
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> d376503 (饶驿婷)
<html>
<head>
<title>html 文档结构 </title>
<link rel="stylesheet" href="index.css"/>
</head>
<body style="color:rgb(204, 55, 50);">
<div class="main">
<div class="row">
<input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
<input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
<input type="button" name="bt" id="button2" value="确认2"/>
</div>
<div id="todogroup">
<!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
<!--<div>wdcr</div>-->
<!--这里面 todo项-->
</div>
<div id="xx" onmousedown="enter('xx')" onmousemove="leave('xx')">ZJGSU&nbsp;&nbsp;2023&nbsp;&nbsp;HAPPY NEW YEARS</div>
</body>
<script lang="javascript">

var intCnt = 0;
function init(){
document.getElementById("button2").onclick=handleClick;
}

function keyup(e){
    if(e.key == "Enter")
    handleClick(e);
}

function handleClick(e){
console.log('handleClick');
console.log(e);
var temp = getValue();
//var div= document.createElement('div');
//div.innerText = temp;
//document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
//document.getElementById("todogroup").append(div);
//追加44行一样的div
//把input输入框内的数据清空
document.getElementById("todogroup").innerHTML +="<div class='item' div id='todo"+intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"+temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("+intCnt+")'>删除</button></div>";
document.getElementById("inputtext").value = "";
intCnt++;
// document.getElementsByClassName("main")[0].style="background-color; #333333;";
}

function getValue(){
var temp = document.getElementById("inputtext");
console.log(temp.value);
return temp.value;
}

function deletByIndex(index){
document.getElementById("todo"+index).remove();
}

function enter(id){
    document.getElementById(id).style='background-color:#3e3a3a'

}

function leave(id){
    document.getElementById(id).style='background-color:aliceblue'
}

init();
</script>
<style>
body{
display:flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}

.main{
/*background-color: rgb(229, 255, 0);
height: 200px;*/
padding: 8px;
border: 1px solid #333333;
border-radius: 8px;
}

.row{
display:flex; 
}

.item{
    display: flex;
    align-items: center;
    margin: 6px;
    padding :3px;
    background-color:#ffffff;
}

.item:hover{
    background-color:#a1a1a1;
}

.item-value{
    flex-grow: 1;
    color: red;
}

.item-del{
    color:aliceblue;
    background-color:red;
    border: 0px;
    opacity: 0;
}

.item:hover .item-del{
    opacity: 1;
}

.input{
    padding: 8px;
    outline: none;
}

.input:focus{
    box-shadow: 0px 0px 10px #37ced9;
    border: 2px solid #37d944;
}
</style>
</html>



<<<<<<< HEAD
=======
=======
<<<<<<< HEAD
<html>
<head>
<title>html 文档结构 </title>
<link rel="stylesheet" href="index.css"/>
</head>
<body style="color:rgb(204, 55, 50);">
<div class="main">
<div class="row">
<input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
<input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
<input type="button" name="bt" id="button2" value="确认2"/>
</div>
<div id="todogroup">
<!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
<!--<div>wdcr</div>-->
<!--这里面 todo项-->
</div>
<div id="xx" onmousedown="enter('xx')" onmousemove="leave('xx')">ZJGSU&nbsp;&nbsp;2023&nbsp;&nbsp;HAPPY NEW YEARS</div>
</body>
<script lang="javascript">

var intCnt = 0;
function init(){
document.getElementById("button2").onclick=handleClick;
}

function keyup(e){
    if(e.key == "Enter")
    handleClick(e);
}

function handleClick(e){
console.log('handleClick');
console.log(e);
var temp = getValue();
//var div= document.createElement('div');
//div.innerText = temp;
//document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
//document.getElementById("todogroup").append(div);
//追加44行一样的div
//把input输入框内的数据清空
document.getElementById("todogroup").innerHTML +="<div class='item' div id='todo"+intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"+temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("+intCnt+")'>删除</button></div>";
document.getElementById("inputtext").value = "";
intCnt++;
// document.getElementsByClassName("main")[0].style="background-color; #333333;";
}

function getValue(){
var temp = document.getElementById("inputtext");
console.log(temp.value);
return temp.value;
}

function deletByIndex(index){
document.getElementById("todo"+index).remove();
}

function enter(id){
    document.getElementById(id).style='background-color:#3e3a3a'

}

function leave(id){
    document.getElementById(id).style='background-color:aliceblue'
}

init();
</script>
<style>
body{
display:flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}

.main{
/*background-color: rgb(229, 255, 0);
height: 200px;*/
padding: 8px;
border: 1px solid #333333;
border-radius: 8px;
}

.row{
display:flex; 
}

.item{
    display: flex;
    align-items: center;
    margin: 6px;
    padding :3px;
    background-color:#ffffff;
}

.item:hover{
    background-color:#a1a1a1;
}

.item-value{
    flex-grow: 1;
    color: red;
}

.item-del{
    color:aliceblue;
    background-color:red;
    border: 0px;
    opacity: 0;
}

.item:hover .item-del{
    opacity: 1;
}

.input{
    padding: 8px;
    outline: none;
}

.input:focus{
    box-shadow: 0px 0px 10px #37ced9;
    border: 2px solid #37d944;
}
</style>
</html>



=======
<html>
<head>
<title>html 文档结构 </title>
<link rel="stylesheet" href="index.css"/>
</head>
<body style="color:rgb(204, 55, 50);">
<div class="main">
<div class="row">
<input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
<input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
<input type="button" name="bt" id="button2" value="确认2"/>
</div>
<div id="todogroup">
<!--<div id="todo0"><input type="checkbox" name="todocheck">ikun<button type="button" onclick="delectByIndex">删除</button></div>-->
<!--<div>wdcr</div>-->
<!--这里面 todo项-->
</div>
<div id="xx" onmousedown="enter('xx')" onmousemove="leave('xx')">ZJGSU&nbsp;&nbsp;2023&nbsp;&nbsp;HAPPY NEW YEARS</div>
</body>
<script lang="javascript">

var intCnt = 0;
function init(){
document.getElementById("button2").onclick=handleClick;
}

function keyup(e){
    if(e.key == "Enter")
    handleClick(e);
}

function handleClick(e){
console.log('handleClick');
console.log(e);
var temp = getValue();
//var div= document.createElement('div');
//div.innerText = temp;
//document.getElementById("todogroup").innerHTML +="<div>"+temp+"</div>"
//document.getElementById("todogroup").append(div);
//追加44行一样的div
//把input输入框内的数据清空
document.getElementById("todogroup").innerHTML +="<div class='item' div id='todo"+intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"+temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("+intCnt+")'>删除</button></div>";
document.getElementById("inputtext").value = "";
intCnt++;
// document.getElementsByClassName("main")[0].style="background-color; #333333;";
}

function getValue(){
var temp = document.getElementById("inputtext");
console.log(temp.value);
return temp.value;
}

function deletByIndex(index){
document.getElementById("todo"+index).remove();
}

function enter(id){
    document.getElementById(id).style='background-color:#3e3a3a'

}

function leave(id){
    document.getElementById(id).style='background-color:aliceblue'
}

init();
</script>
<style>
body{
display:flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}

.main{
/*background-color: rgb(229, 255, 0);
height: 200px;*/
padding: 8px;
border: 1px solid #333333;
border-radius: 8px;
}

.row{
display:flex; 
}

.item{
    display: flex;
    align-items: center;
    margin: 6px;
    padding :3px;
    background-color:#ffffff;
}

.item:hover{
    background-color:#a1a1a1;
}

.item-value{
    flex-grow: 1;
    color: red;
}

.item-del{
    color:aliceblue;
    background-color:red;
    border: 0px;
    opacity: 0;
}

.item:hover .item-del{
    opacity: 1;
}

.input{
    padding: 8px;
    outline: none;
}

.input:focus{
    box-shadow: 0px 0px 10px #37ced9;
    border: 2px solid #37d944;
}
</style>
</html>



>>>>>>> 861c01f (饶驿婷)
>>>>>>> 4a7ce3a (饶驿婷)
>>>>>>> d376503 (饶驿婷)
>>>>>>> ceff70e (饶驿婷)
>>>>>>> f4551b3 (饶驿婷)
